<template>
  <view>
    <view class="fixed-content">
      <view class="head-content">
        <view class="out-box">
          <view class="head-box">
            <u-dropdown
              title-size="34rpx"
              active-color="#2979ff"
              :menu-icon-size="orgList.length > 1 ? 26 : 0"
              inactive-color="#606266"
            >
              <u-dropdown-item
                v-model="value1"
                :title="dropdownTitle"
                class="dropdown-item"
                :options="orgList"
                :disabled="orgList.length <= 1"
                @change="changeHandel"
              ></u-dropdown-item>
            </u-dropdown>
            <view v-if="tabsCurrent !== 1" @click="filterHandel">
              <u-icon name="list" color="#fff" :size="32"></u-icon>
              <text style="color: #fff" class="u-font-32 u-m-l-8 u-m-r-12">{{
                !queryData.todoTypeList || queryData.todoTypeList.length === 0
                  ? '筛选'
                  : '已选'
              }}</text>
            </view>
          </view>
        </view>
        <!-- <view class="transition-bg">
          <view class="fast-enter">
            <view>项目统计</view>
            <view>访视日历</view>
            <view>项目统计2</view>
            <view>访视日历2</view>
          </view>
        </view> -->
      </view>
      <u-card
        v-if="orgList.length !== 0"
        :show-head="false"
        :body-style="{ padding: 0 }"
      >
        <u-tabs
          slot="body"
          :offset="[5, 0]"
          :list="tabsList"
          height="100"
          bar-width="140"
          :is-scroll="false"
          :current="tabsCurrent"
          @change="tabsChange"
        ></u-tabs>
      </u-card>
    </view>
    <view
      v-if="
        checkedOrg.orgAvailable &&
        (!checkedOrg.appList || checkedOrg.appList.length === 0)
      "
      class="empty-view"
    >
      <u-empty
        text="请联系管理员给您赋予应用权限"
        mode="permission"
        :fontSize="32"
        color="#ff9900"
        icon-color="#fcbd71"
      ></u-empty>
    </view>
    <view v-if="!checkedOrg.orgAvailable" class="empty-view">
      <u-empty
        text="当前组织已被禁用"
        mode="permission"
        :fontSize="32"
        color="#ff9900"
        icon-color="#fcbd71"
      ></u-empty>
    </view>
    <template v-else>
      <view v-if="!checkedOrg.accountAvailable" class="empty-view">
        <u-empty
          text="您的账户已被组织禁用，请联系管理员"
          mode="permission"
          :fontSize="32"
          color="#ff9900"
          icon-color="#fcbd71"
        ></u-empty>
      </view>
      <view v-else class="content-item">
        <!--我的待办-->
        <todoListCom
          v-show="!isNaN(tabsCurrent) && tabsCurrent === 0"
          ref="refCom0"
          :current="0"
          :todoTypeList="queryData.todoTypeList"
          @search="count"
        />
        <!--待反馈任务-->
        <feedback
          v-show="!isNaN(tabsCurrent) && tabsCurrent === 1"
          ref="refCom1"
          :tabsCurrent="1"
          :todoTypeList="queryData.todoTypeList"
          @search="count"
        />
        <!--我的已办-->
        <finishList
          v-show="!isNaN(tabsCurrent) && tabsCurrent === 2"
          ref="refCom2"
          :current="2"
          :todoTypeList="queryData.todoTypeList"
        />
      </view>
    </template>
  </view>

  <u-popup
    v-model="show"
    mode="bottom"
    :closeable="true"
    height="100%"
    border-radius="12"
  >
    <view class="popup-content">
      <view class="title">全部筛选</view>

      <!-- class="scroll-view_Y u-m-t-30"
        :style="`height: ${px2rpx(screenHeight) - 152}rpx`"
        scroll-y="true" -->
      <scroll-view class="popup-content-item" scroll-y="true">
        <u-form :model="queryData" label-position="top" ref="uForm">
          <u-form-item prop="projectStatus">
            <select-box-group
              v-model:select="queryData.todoTypeList"
              type="multiple"
            >
              <template v-for="item in optionList">
                <view class="w-full">{{ item.title }}</view>
                <select-box-option
                  v-for="(el, index) in item.children"
                  :key="index"
                  :label="el.label"
                  :value="el.value"
                ></select-box-option>
              </template>
            </select-box-group>
          </u-form-item>
        </u-form>
      </scroll-view>
      <view class="btn-group">
        <u-button
          plain
          type="primary"
          shape="circle"
          class="w-40"
          @click="clear()"
          >清空选择</u-button
        >
        <u-button type="primary" shape="circle" class="w-40" @click="search()"
          >确定</u-button
        >
      </view>
    </view>
  </u-popup>
  <u-tabbar v-model="current" :list="tabbar" active-color="#2979ff"></u-tabbar>
  <u-modal
    width="90%"
    v-model="showVersion"
    :content-style="{ padding: '20rpx' }"
    :title="`${versionInfo.version}版本更新公告 `"
    :title-style="{
      'border-bottom': '1px solid #ccc',
      padding: '20rpx 0 10rpx',
    }"
    confirm-text="我已知晓"
  >
    <template #default>
      <scroll-view scroll-y="true" style="max-height: 60vh">
        <rich-text :nodes="versionInfo.content"></rich-text>
      </scroll-view>
    </template>
  </u-modal>
</template>

<script lang="ts" setup>
// import TaskItem from './components/taskItem.vue';
import { tabbar } from '@/common/tabbar';
import selectBoxGroup from '@/components/SelectBox/selectBoxGroup.vue';
import selectBoxOption from '@/components/SelectBox/selectBoxOption.vue';
import { optionList } from './index';
import feedback from './components/feedback.vue';
import todoListCom from './components/todoList.vue';
import finishList from './components/finishList.vue';

import { useUserStore } from '@/stores/user';
import { onLaunch, onShow, onReady } from '@dcloudio/uni-app';
import { Ref, nextTick } from 'vue';
import {
  todoCount,
  doneCount,
  pendingFeedbackTaskCount,
} from '@/api/modules/home';
import useOrgAuth from '@/hooks/useOrgAuth';
import { getVersionInfo } from '@/api/modules/common';

// import { getMap } from './index';

// const TodoListMap = getMap();

// console.log('TodoListMap', TodoListMap);

const userStore = useUserStore();
const orgList = (userStore?.getAuth ?? [])
  .filter((item: any) =>
    (item.appList || []).some((el: any) => el.appCode === 'CTMS')
  )
  .map((item: any) => ({
    label: item.orgName,
    value: item.orgId,
  }));
const value1 = ref(orgList[0]?.value);

const { checkedOrg } = useOrgAuth();

const tabsCurrent = ref<number>(0);
const tabsList = ref<any[]>([
  {
    name: '我的待办',
    count: 0,
  },
  {
    name: '待反馈任务',
    count: 0,
  },
  {
    name: '我的已办',
    count: 0,
  },
]);

const current = ref(0);

const show = ref(false);
const dropdownTitle = ref(orgList[0]?.label);

const queryData = ref<any>({
  todoTypeList: undefined,
});

// orgList.forEach((item: any) => {
//   item.disabled = item.appList.some((el: any) => el.appCode === 'CTMS');
// });
const refCom0 = ref();
const refCom1 = ref();
const refCom2 = ref();

const filterHandel = () => {
  show.value = true;
};
const changeHandel = (val: number) => {
  const currDropdownItem = orgList.find((item: any) => item.value === val);
  dropdownTitle.value = currDropdownItem ? currDropdownItem.label : '请选择';
  const currOrg = userStore.getAuth.find((item: any) => item.orgId === val);
  userStore.setOrgInfo(currOrg);
  const defaultApp = (currOrg?.appList || []).find(
    (item: any) => item.appCode === 'CTMS'
  );
  userStore.setAppInfo(defaultApp);
  count();
  queryList();
};
const tabsChange = async (val: number) => {
  tabsCurrent.value = val;
  nextTick(() => {
    queryList();
    count();
  });
};

const clear = () => {
  queryData.value.todoTypeList = undefined;
  if (orgList.length > 0) {
    nextTick(() => {
      count();
      queryList();
    });
  } else {
    show.value = false;
  }
};
const search = () => {
  if (orgList.length > 0) {
    count();
    queryList();
  } else {
    show.value = false;
  }
};

const queryList = () => {
  switch (tabsCurrent.value) {
    case 0:
      refCom0.value ? refCom0.value.search() : () => {};
      break;
    case 1:
      refCom1.value ? refCom1.value.search() : () => {};
      break;
    case 2:
      refCom2.value ? refCom2.value.search() : () => {};
      break;
  }
  show.value = false;
};

// 获取角标
const count = () => {
  todoCount({
    todoTypeList: queryData.value.todoTypeList?.join(','),
  }).then((res: any) => {
    tabsList.value[0].count = res ?? 0;
  });
  // doneCount().then((res: any) => {
  //   tabsList.value[2].count = res ?? 0;
  // });
  pendingFeedbackTaskCount().then((res: any) => {
    tabsList.value[1].count = res ?? 0;
  });
};

onShow(() => {
  console.log('1111');
  queryData.value.todoTypeList = undefined;
  // if (tabsCurrent.value !== 0) {
  //   tabsCurrent.value = 0;
  // }
  clear();
});
onMounted(() => {
  versionInit();
});
// 获取版本信息
const versionInfo = ref<verType>({
  version: '',
  content: '',
});
interface verType {
  version: string;
  content: string;
}
const showVersion = ref<boolean>(false);
const versionInit = () => {
  getVersionInfo({
    clientType: 2,
    // id: '3342071442740084743', //测试版本显示使用
  }).then((res: any) => {
    Object.assign(versionInfo.value, res);
    if (res && res.version) {
      showVersion.value = true;
    } else {
      showVersion.value = false;
    }
  });
};

// onLaunch(() => {
//   queryList();
// });
</script>

<style lang="scss" scoped>
.fixed-content {
  // height: 240rpx;
  position: fixed;
  z-index: 11;
  top: 0;
  width: 100%;
  background-color: #f0f1f2;
  // overflow: hidden;
}
.content-item {
  padding-top: 240rpx;
  position: relative;
}
.head-content {
  // height: 300rpx;
  height: 80rpx;
  // overflow: hidden;
  .out-box {
    // height: 200rpx;
    background: #0177fd;
    .head-box {
      display: flex;
      align-items: center;
      padding: 0 20rpx;
    }
  }
}
::v-deep .u-dropdown {
  position: unset !important;
  text-align: left;
  // .dropdown-item {
  //   padding: 0 12rpx;
  // }
  .u-dropdown__menu__item {
    padding: 0 12rpx;
    justify-content: start !important;
    .u-icon__icon {
      color: #fff !important;
    }
  }
  .u-dropdown__menu__item__text {
    color: #fff !important;
    max-width: calc(100vw - 230rpx);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .u-dropdown__content {
    width: 100%;
  }
}
::v-deep .u-badge-mini {
  padding: 10rpx 20rpx !important;
  background-color: #ff4d4f !important;
}

.transition-bg {
  position: absolute;
  top: 100rpx;
  width: 90%;
  left: 5%;
  height: 200rpx;
  border-radius: 30rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);
}

.w-full {
  width: 100%;
}
.popup-content {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .title {
    font-size: 32rpx;
    text-align: center;
    font-weight: bold;
    margin-bottom: 10rpx;
    flex: 0;
    height: 100rpx;
  }
  .popup-content-item {
    flex: 1;
    max-height: calc(100vh - 222rpx - env(safe-area-inset-bottom));
  }
}
.btn-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 30rpx;
  height: 110rpx;

  .w-40 {
    width: 40%;
  }
}

.fast-enter {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
.empty-view {
  width: 100%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
